<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
    <link rel="stylesheet" href="../../css/orderitem.css">
 </head>
<body>

<style>
.order-item{
    border-bottom: .2rem solid #f1f1f2;
}
.productbtn{
    border-top:1px solid #f1f1f2;
}
#fav-box .aui-active{
    color:#e02e24;
    border-bottom: 2px solid #e02e24;
}
.product .product-title,.product-price{
    margin-left: 0.5rem;
}
.btn-dian{
    border:#cccccc solid 1px;
    font-size: 0.6rem;
    line-height: 1.2rem;
    width: 5rem;
    color:#58595b;
    border-radius:0.2rem;
    justify-content:center;
    margin-right: 0.5rem;
}
</style>
<div id="fav-box">

<div class="aui-content bg-white">

   <div class="product-list"  v-show="tabname==='product'">
    <div class="order-item" v-for="item in prdlist">
         <div class="product">
            <div class="product-logo-title">
                <img :src="item.tumb_pic_url" class="product-logo">
              <div>
                <div class="product-title">
                    {{item.title}}
                 </div>
                <div class="product-price" v-if="item.buy_how==0">￥{{item.pin_price/100}}</div>
                  <div class="product-price" v-else>￥{{item.directbuy_price/100}}</div>
              </div>
             </div>
         </div>
         <div class="productbtn">
             <span @click="delfav(item.id,'product')">删除</span></div>
    </div>

   </div>

    <div class="shoplist" style="display: none" v-show="tabname==='shop'">
        <div class="aui-content aui-margin-t-10">
             <ul class="aui-list aui-media-list">
                 <li class="aui-list-item aui-list-item-middle" v-for="item in shoplist">
                     <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;">
                            <img :src="item.logo_url">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-title">{{item.title}}</div>
                            <div class="aui-list-item-text" style="font-size: 0.6rem">商品数量 {{item.tproductnum}}
                             </div>
                        </div>
                        <div class="aui-media-list-item-inner btn-dian" @click="delfav(item.id,'shop')">删除</div>
                        <div class="aui-media-list-item-inner btn-dian "  @click="goshop(item.id)">进店
                        </div>

                    </div>
                </li>
            </ul>

        </div>
    </div>


</div>
</div>
<script>
    var pvm = new Vue({
        el:'#fav-box',
        data:{
            prdlist:[],
            shoplist:[],
            tabname:'product',
            prd_page:1,
            prd_totalpage:1,
            shop_page:1,
            shop_totalpage:1,
            retback:true,
            token:'',
        },
        methods:{
            goshop:function (id) {
              $page.openwin('shop_index','../shop/index.html',{id:id});
             },
            delfav:function (id,flag) {
              $page.get_data('/api/member/delHistory','post',{data_id:id,group_flag:flag,token:this.token},function (ret) {
                    if(flag=="product"){
                        for (var i in pvm.prdlist) {
                            if (pvm.prdlist[i].id == id) {
                                pvm.prdlist.splice(i, 1);
                            }
                        }
                        pvm.prdlist = [].concat(pvm.prdlist);
                    }else{
                        for (var i in pvm.shoplist) {
                            if (pvm.shoplist[i].id == id) {
                                pvm.shoplist.splice(i, 1);
                            }
                        }
                        pvm.shoplist = [].concat(pvm.shoplist);
                    }

              });
            },
            getList:function () {
                if(this.tabname=='product'){
                    this.getprdlist();
                }else{
                    this.getshoplist();
                }
            },
            getprdlist:function () {
                this.tabname = 'product';
                if(pvm.prd_page>pvm.prd_totalpage || !pvm.retback){
                    return;
                }
                pvm.retback =false;
                $page.get_data('/api/member/getFavProduct','post',{'page':this.prd_page,'token':this.token},function (ret) {
                    if(ret.errno !==1000){
                      return ;
                    }
                    pvm.prd_totalpage = ret.data.totalpage;
                    pvm.prd_page = pvm.prd_page+1;
                    pvm.retback = true;

                    ret.data.list.forEach(function(el){
                        pvm.prdlist.push(el);
                    });
                });
            },
            getshoplist:function () {
                this.tabname='shop';
                if(pvm.shop_page>pvm.shop_totalpage || !pvm.retback){
                    return;
                }
                pvm.retback =false;
                $page.get_data('/api/member/getFavShop','post',{'page':this.shop_page,'token':this.token},function (ret) {
                  if(ret.errno !==1000){
                    return ;
                  }
                    pvm.shop_totalpage = ret.data.totalpage;
                    pvm.shop_page = pvm.shop_page+1;
                    pvm.retback = true;
                    ret.data.list.forEach(function(el){
                        pvm.shoplist.push(el);
                    });
                });
            }
        }
    });

    apiready=function(){

      pvm.token = $api.getStorage('token');
      var pageParam = api.pageParam;
      pvm.tabname=pageParam.tabname;
      console.log(pageParam.tabname);
      $page.init();
      pvm.getList();

      $page.pullup(function (ret) {
          pvm.getList();
      });
      $page.pullreload(function(){

      });
    }
</script>

</body>
</html>
